{% extends "base.html" %}
<body>
{% block detail %}
<form action="/signup/" id="signupform" method="post" class="form-horizontal">{% csrf_token %}

    <div class="main">
        <div class="register_wrap">
            <div class="register_box">
                {% if error %}
                    {{ error }}
                {% endif %}
                {{form.username.errors}}
                {{form.email.errors}}
            <div class="validate" id="validate"></div>
                <h3>Username</h3>
                {% if form.username.value %}
                    <p class="p01"><input type="text" value="{{form.username.value}}" id="username" name="username" class="user_name" /></p>
                {% else %}
                    <p class="p01"><input type="text" value="" id="username" name="username" class="user_name" /></p>
                {% endif %}
                <h3>Email</h3>
                {% if form.email.value %}
                    <p class="p03"><input type="text" value="{{form.email.value}}" id="email" name="email" class="user_email" /></p>
                {% else %}
                    <p class="p03"><input type="text" value="" id="email" name="email" class="user_email" /></p>
                {% endif %}

                <h3>Password</h3>
                <p class="p02"><input type="password" id="password" name="password" class="user_password" /></p>
                <h3>Confirm Password</h3>
                <p class="p02"><input type="password" id="confirmPassword" name="confirmPassword" class="user_password" /></p>
                <input type="button" onclick="check()" value="Sign up" class="loginBtn" /><a href="/login/">or Log In</a>
            </div>
        </div>
    </div>
</form>
{% endblock %}
</body>
{% block js %}
<script>
function check(){
    if($("#username").val()==''){
        $("#validate").empty();
        $("#validate").html("Username is required!");
        return false;
    }
    if($("#username").val().length>30){
        $("#validate").empty();
        $("#validate").html("Required 30 characters or fewer Letters!");
        return false;
    }
    if($("#email").val()==''){
        $("#validate").empty();
        $("#validate").html("Email is required!");
        return false;
    }
    if($("#password").val()==''){
        $("#validate").empty();
        $("#validate").html("Password is required!");
        return false;
    }
    if($("#confirmPassword").val()==''){
        $("#validate").empty();
        $("#validate").html("Confirm password is required!");
        return false;
    }
    if($("#password").val()!=$("#confirmPassword").val()){
        $("#validate").empty();
        $("#validate").html("Password and confirm password must be same!");
        return false;
    }
    $("#signupform").submit();
}
</script>
{% endblock %}
</html>